<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原创谱管理系统</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #fff;
        }

        #header {
            background-color: #000;
            color: #fff;
            text-align: left;
            padding: 20px;
            box-sizing: border-box;
        }

        #sidebar {
            width: 200px;
            background-image: linear-gradient(to top, #adcefc, #96c4fd);
            color: #000;
            float: left;
            padding-top: 10px;
            height:  calc(100vh - 71px);
            box-sizing: border-box;
        }

        #content {
            float: left;
            padding:0 20px;
            height:  calc(100vh - 71px);
            box-sizing: border-box;
            width: calc(100% - 200px);
            overflow: hidden;
        }

        #logo {
            font-size: 24px;
        }

        .menu-item {
            padding: 20px 25px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .menu-item:hover {
            background-color: #007bff;
            color: #fff;
        }

        .menu-item.active {
            display: block;
            background-color: #007bff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="header">
        <div id="logo">原创谱管理系统</div>
    </div>

    <div id="sidebar">
        <div class="menu-item" data-src="tasks">任务管理</div>
        <div class="menu-item" data-src="ppts">备课ppt</div>
        <div class="menu-item" data-src="users">用户管理</div>
        <div class="menu-item" data-src="audios">音频管理</div>
        <div class="menu-item" data-src="courses">课程管理</div>
        <div class="menu-item" data-src="notations">谱例管理</div>
        <div class="menu-item" data-src="chords">和弦管理</div>
        <div class="menu-item" data-src="keys">调式管理</div>
        <div class="menu-item" data-src="keyboards">键盘键位管理</div>
        <div class="menu-item" data-src="menus">菜单管理</div>
    </div>

    <div id="content">
        <!-- 加入无边框的iframe -->
        <iframe src="" frameborder="0" width="100%" height="100%"></iframe>
    </div>

    <script src="../js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('.menu-item').click(function () {
                var src = $(this).data('src');
                $("#content iframe").attr("src", src + ".html");
                $('.menu-item').removeClass('active');
                $('.menu-item[data-src="' + src + '"]').addClass('active');
            });
        });
    </script>

</body>

</html>